<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>dom-traversal Test</title>
</head>
<body>
<script src="../test/test.js"></script>
<script>
    KISSY.Test.Config.times = 1;
</script>

<h2>Test Data</h2>

<script src="../../build/kissy/kissy-pkg.js"></script>
<script src="../../build/ua/ua-pkg.js"></script>

<script src="dom.js"></script>
<script src="selector.js"></script>
<script src="dom-class.js"></script>
<script src="dom-traversal.js"></script>
<script>KISSY.add('core');</script>

<script src="../sizzle/sizzle.js"></script>
<script src="../../third-party/jquery/jquery-1.4.2.js"></script>
<script src="../../third-party/ext-core/ext-core.js"></script>

<div id="test-data">
    <p id="foo">
        <a href="../kissy/" style="color:red" class="link" title="test" data-test="test">test link</a>
        <input type="text" id="test-input" readonly maxlength="20" value="hello"/>
        <input type="radio" id="test-radio" />
        <input type="radio" id="test-radio2" checked />
        <label class="test" for="test-input">label</label>
        <button type="button" tabindex="3">Submit</button>
        <textarea rows="2" cols="2">
            test
        </textarea>
    </p>
    <div id="test-div"></div>
    <table id="test-table" cellspacing="10">
        <tbody>
        <tr>
            <td rowspan="2" colspan="3">td</td>
        </tr>
        </tbody>
    </table>
    <select id="test-select">
        <option id="test-opt" value="1">0</option>
        <option>2</option>
        <option>3</option>
    </select>
    <select id="test-select2">
        <option>2</option>
    </select>
    <select id="test-select3" multiple autocomplete="off">
        <option selected>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
    <div id="test-children" class="test-parent">
        <p id="test-next"><a>1</a></p>
        <p class="test-next-p"><a class="test-a">2</a></p>
        <p class="test-next"><a id="test-parent3">3</a></p>
        <p class="test-p" id="test-prev"><em class="test-em"><span><a id="test-parent4">4</a></span></em></p>
    </div>
</div>

<!-- Test Cases -->
<script>
    var S = KISSY, DOM = S.DOM;

    function test_parent(test) {
        var t = S.get('#test-parent4');

        if(DOM.parent(t).tagName !== 'SPAN') test.fail(DOM.parent(t).tagName);
        if(DOM.parent(t, 4).className !== 'test-parent') test.fail(DOM.parent(t, 2).className);
        if(DOM.parent(t, 'em').className !== 'test-em') test.fail();
        if(DOM.parent(t, '.test-p').tagName !== 'P') test.fail();
        if(DOM.parent(t, 'p.test-p em').className !== 'test-em') test.fail();
        if(DOM.parent(t, function(elem){ return elem.tagName === 'P'; }).className !== 'test-p') test.fail();

        if(DOM.parent(document.body) !== document.documentElement) test.fail();
        if(DOM.parent('#test-data') !== document.body) test.fail();
        if(DOM.parent(t, 0) !== t) test.fail();

        if(DOM.parent() !== null) test.fail();
        if(DOM.parent('#test-data', 'p') !== null) test.fail();
        if(DOM.parent('#test-data', -1) !== null) test.fail();
        if(DOM.parent('#test-parent4', '.text-next') !== null) test.fail();
    }

    function test_next(test) {
        var t = S.get('#test-next');

        if(DOM.next(t).className !== 'test-next-p') test.fail();

        if(DOM.next(t, -1) !== null) test.fail();
        if(DOM.next(t, 0) !== t) test.fail();
        if(DOM.next(t, 1).className !== 'test-next-p') test.fail();
        if(DOM.next(t, 2).className !== 'test-next') test.fail();

        if(DOM.next(t, '.test-next').tagName !== 'P') test.fail();
        if(DOM.next(t, '.test-none') !== null) test.fail();

        if(DOM.next(t, function(elem) { return elem.className === 'test-p'; }).tagName !== 'P') test.fail();
    }

    function test_prev(test) {
        var t = S.get('#test-prev');

        if(DOM.prev(t).className !== 'test-next') test.fail();

        if(DOM.prev(t, -1) !== null) test.fail();
        if(DOM.prev(t, 0) !== t) test.fail();
        if(DOM.prev(t, 1).className !== 'test-next') test.fail();
        if(DOM.prev(t, 2).className !== 'test-next-p') test.fail();

        if(DOM.prev(t, '#test-next').tagName !== 'P') test.fail();
        if(DOM.prev(t, '.test-none') !== null) test.fail();

        if(DOM.prev(t, function(elem) { return elem.className === 'test-next-p'; }).tagName !== 'P') test.fail();
    }

    function test_siblings(test) {
        var t = S.get('#test-prev');

        if(DOM.siblings(t).length !== 3) test.fail(DOM.siblings(t).length);

        if(DOM.siblings(t, '#test-next')[0].tagName !== 'P') test.fail();
        if(DOM.siblings(t, '.test-none').length !== 0) test.fail();

        if(DOM.siblings(t, function(elem) { return elem.className === 'test-next-p'; }).length !== 1) test.fail();
    }

    function test_children(test) {
        var t = S.get('#test-children');

        if(DOM.children(t).length !== 4) test.fail();
        if(DOM.children(t, '.test-next,.test-next-p').length !== 2) test.fail();
        if(DOM.children(t, 'p:first')[0].id !== 'test-next') test.fail();
        if(DOM.children('#test-div').length !== 0) test.fail();
    }

    function test_contains(test) {

        if(DOM.contains(document, '#test-prev') !== true) test.fail();
        if(DOM.contains(document.documentElement, document.body) !== true) test.fail();
        if(DOM.contains(document, document.body) !== true) test.fail();
        if(DOM.contains(document.body, document.documentElement) !== false) test.fail();

        if(DOM.contains(document.body) !== false) test.fail();
        if(DOM.contains() !== false) test.fail();
    }

    // temp code
    //alert(Ext.get('test-next').is('p'));

</script>

</body>
</html>